<template>
    <div class="lyear-layout-web">
        <div class="lyear-layout-container">
            <the-aside></the-aside>

            <the-header title="用户列表"></the-header>

            <button id="add-edit-button" type="button" v-show="false" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
                添加修改窗口触发按钮
            </button>

            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="gridSystemModalLabel"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-username">用户昵称</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="user.username" type="text" id="example-hf-username" name="example-hf-username" placeholder="请输入用户昵称..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-username">手机号</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="user.phone" type="text" id="example-hf-phone" name="example-hf-phone" placeholder="请输入手机号..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" for="example-hf-password" style="padding-top:7px; ">密码</label>
                                </div>
                                <div class="col-md-7">
                                    <input class="form-control" v-model="user.password" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="control-label" style="padding-top:5px;" for="example-hf-roleId">角色选择</label>
                                </div>
                                <div class="col-md-7">
                                    <select id="example-hf-roleId" v-model="user.roleId" style="width:320px; height: 38px;" class="form-control" size="1">
                                        <template v-for="role in roleList">
                                            <option :value="role.id" v-text="role.name"></option>
                                        </template>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="close-button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" @click="saveUser">点击保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <the-button :msg="msg" :fun="fun" @deleteUser="deleteUser"></the-button>

            <!--页面主要内容-->
            <main class="lyear-layout-content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-toolbar clearfix">
                                    <form class="pull-right search-bar" style="max-width:460px;" role="form">
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <input type="hidden" name="search_field" id="search-field" value="title">
                                                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
                                                    用户昵称 <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li> <a tabindex="-1" href="javascript:void(0)" @click="showSearch('username')" data-field="title">用户昵称</a> </li>
                                                    <li> <a tabindex="-1" href="javascript:void(0)" @click="showSearch('roleId')" data-field="cat_name">所属角色</a> </li>
                                                </ul>
                                            </div>
                                            <input id="search-username" style="width:280px" v-model="searchContent" type="text " v-show="usernameSearch" class="form-control" value="" placeholder="请输入要搜索的内容..">
                                            <select id="search-role-Id" style="width:280px; height: 38px;" v-model="searchContent" v-show="roleIdSearch" class="form-control" size="1">
                                                <option value="">请选择要搜索的内容..</option>
                                                <template v-for="role in roleList">
                                                    <option :value="role.id" v-text="role.name"></option>
                                                </template>
                                            </select>
                                            <a class="btn btn-pink" href="javascript:void(0);" @click="searchUser"><i class="mdi mdi-search-web"></i> 搜索</a>
                                        </div>
                                    </form>
                                    <div class="toolbar-btn-action">
                                        <a class="btn btn-primary m-r-5" href="javascript:void(0);" @click="openAdd"><i class="mdi mdi-plus"></i> 添加</a>
                                        <a class="btn btn-info m-r-5" href="javascript:void(0);" @click="refresh"><i class="mdi mdi-rotate-3d"></i> 刷新</a>
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                            <tr>
                                                <th style="width:10%">编号</th>
                                                <th style="width:30%">用户名</th>
                                                <th style="width:30%">手机号码</th>
                                                <th style="width:20%">所属角色</th>
                                                <th style="width:10%">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="user in localCompanyList" >
                                                <td :id="'user-id-'+user.id" v-text="user.id"></td>
                                                <td :id="'user-username-'+user.id" v-text="user.username"></td>
                                                <td style="display:none" :id="'user-password-'+user.id" v-text="user.password"></td>
                                                <td :id="'user-phone-'+user.id" v-text="user.phone"></td>
                                                <td :id="'user-roleId-'+user.id" :tip="user.roleId" v-text="user.roleDto.name"></td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-xs btn-default" @click="openEdit(user.id)" href="javascript:void(0);" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                     <!--   <a class="btn btn-xs btn-default" @click="openDelete(user.id)" href="javascript:void(0);" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>-->
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <!-- 分页 -->
                                    <the-pagination :page="page" :getData="getData" :searchContent="searchContent" :searchType="searchType" :totalPage="totalPage"></the-pagination>


                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </main>
            <!--End 页面主要内容-->
        </div>
    </div>
</template>



<script>
    import TheHeader from "../components/the-header";
    import TheAside from "../components/the-aside";
    import TheButton from "../components/the-button";
    import ThePagination from "../components/the-pagination";
    export default {
        name: 'user-list',
        components: {TheHeader, TheAside, TheButton, ThePagination},
        data: function() {
            return {
                localCompanyList: [],
                roleList:[],
                msg: "",
                user: {},
                fun:"",
                page: 1,
                totalPage: 1,
                usernameSearch: true,
                roleIdSearch: false,
                searchContent: '',
                searchType: 'username'
            }
        },
        //mounted 页面渲染完后执行 钩子函数
        mounted:function(){
            $('.search-bar .dropdown-menu a').click(function() {
                let field = $(this).data('field') || '';
                $('#search-field').val(field);
                $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
            });
            //获取用户列表的数据
            let _this = this;
            let data = {
                page: _this.page,
                searchContent: _this.searchContent,
                searchType: _this.searchType
            };
            _this.getData(data);
        },
        created: function () {
            let _this = this;
            let data = {
                page: _this.page,
            };
            _this.$ajax.post(process.env.VUE_APP_SERVER + "/role/get_data", data).then((response)=>{
                let resp = response.data;
                if(resp.code === 0){
                    _this.roleList = resp.data.list;
                    _this.page = resp.data.page;
                    _this.totalPage = resp.data.totalPage;
                }
            });
        },
        methods:{
            getData(data){
                Loading.show();
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/local_company/get_data", data).then((response)=>{
                    let resp = response.data;
                    Loading.hide();
                    if(resp.code === 0){
                        _this.localCompanyList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                    }
                });
            },
            openAdd(){
                let _this = this;
                _this.user.id = null;
                $("#gridSystemModalLabel").text("添加用户");
                $("#add-edit-button").click();
            },
            openEdit(id){
                let _this = this;
                $("#gridSystemModalLabel").text("编辑用户");
                _this.user.username = $("#user-username-"+id).text();
                $("#example-hf-username").val($("#user-username-"+id).text());

                _this.user.phone = $("#user-phone-"+id).text();
                $("#example-hf-phone").val($("#user-phone-"+id).text());


                _this.user.password = $("#user-password-"+id).text();
                $("#example-hf-password").val($("#user-password-"+id).text());


                _this.user.roleId = $("#user-roleId-"+id).attr("tip");
                $("#example-hf-roleId").val(_this.user.roleId);

                _this.user.id = id;
                $("#add-edit-button").click();
            },
            saveUser(){
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/local_company/save", _this.user).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = resp.msg;
                        _this.localCompanyList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                        $("#close-button").click();
                    }else{
                        _this.msg = resp.msg;
                    }
                    $("#alert-button").click();
                });
            },
            openDelete(id){
                let _this = this;
                _this.user.id = id;
                _this.fun = "deleteUser";
                _this.msg = "确定要删除此条记录吗？";
                $("#confirm-button").click();
            },
            deleteUser(){
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/local_company/delete", {id:_this.user.id}).then((response)=>{
                    let resp = response.data;
                    if(resp.code === 0){
                        _this.msg = resp.msg;
                        _this.localCompanyList = resp.data.list;
                        _this.page = resp.data.page;
                        _this.totalPage = resp.data.totalPage;
                    }else{
                        _this.msg = resp.msg;
                    }
                    $("#alert-button").click();
                });
            },
            refresh(){
                window.location.reload();
            },
            showSearch(type){
                let _this = this;
                if(type === 'username'){
                    _this.searchContent = "";
                    _this.usernameSearch = true;
                    _this.roleIdSearch = false;
                    _this.searchType = 'username';
                }else if(type === 'roleId'){
                    _this.searchContent = "";
                    _this.usernameSearch = false;
                    _this.roleIdSearch = true;
                    _this.searchType = 'roleId';
                }
            },
            searchUser(){
                let _this = this;
                //获取用户列表的数据
                let data = {
                    page: _this.page,
                    searchContent: _this.searchContent,
                    searchType: _this.searchType
                };
                _this.getData(data);
            },
            permissionCheck(url){
                let permissionList = Permission.getPermission();
                for(let i=0; i<permissionList.length; i++){
                    if(url === permissionList[i]){
                        return true;
                    }
                }
                return false;
            }
        }
    }

</script>


<style>
</style>


